<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<main name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
		<title>Web_实操</title>
		<link rel="stylesheet" href="../css/INFINI _ 映纷创意_files/main.csss">
	<link rel="stylesheet" href="../img/INFINI _ 映纷创意_files/layout.css">
	<style>
body {margin:25px;}

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}

div.con{
	width: 31%;
	border-radius: 5px;
	background: white;
	float: left;
	margin: 2% 1.15%;
	overflow: hidden;
}

img {
    border-radius: 20px;
}
html{overflow-x: hidden;
     background: #f2f2f2;}
body {
 	height: auto;
 	width: 100%;
    margin: 0px;
 }
 header {
 	position: fixed;
	width: 100%;
	z-index: 222;
	height: 92px;
	top: 0;
 	_position:absolute; 
 	_margin-top: 0; 
 	_top:expression(documentElement.scrollTop);
}
 main{margin:0 10px;}
 
 .top {
 	vertical-align: top;
 	background: rgb(0, 0, 0);
 	height: 75px;
 	width: 100%;
 	opacity: 0.75;
 	filter: alpha(opacity=75);
 	padding-top: 15px;
 	position: relative;
 	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
 	text-align: center;
 	padding-bottom: 10px;
 } 
 .logo {
 	height: 44px;
 	width: 136px;
 	margin: 0px auto;
	text-align: center;
 }
 .bar {
 	position: absolute;
 	color: #8e8e8e;
 	font-size: 0.9em;
 	bottom: 5px;
 	font-family: HUM521L;
 	width: 100%;
	    text-align: center;
 }
 nav {
 	width: 80%;
 	text-align: center;
 	margin: auto;
 	min-width: 320px;
 } 
 nav a {
 	color: #898989;
 	text-decoration: none;
 	margin-left: 11%;
 }
 nav a:hover {
 	color: white;
 }
 .introduction{
	 width:100%;
	margin-top: 50px;
	text-indent: 2em;
	padding-top: 2%;
	padding-bottom: 2%;
	border-top: 1px #e8e8e8 solid;
	border-bottom: 1px #e8e8e8 solid;
	font-size: 1.2em;
	line-height: 1.5em;
	color: #666666;
	font-family:STKaiti;
}
aside{ 
	width:100%;
	margin: 10px;
	padding-left:5% ;
	overflow: hidden;
}
section{width:100%;overflow: hidden;margin:0 10px;}
span img{
	width: 4.8%;
	margin: 0.7%;
	min-width: 35px;
}
figure{
	width: 31%;
	border-radius: 8px;
	background: white;
	float: left;
	margin: 1.5% 1%;
	color: #959595;
	text-decoration: none;
	box-shadow: 2px 2px 2px #e3e3e3;
	position: relative;
	display: inline-block;
}
figcaption {
	clear: both;
	text-align: center;
	line-height: 35px;
	font-size: 0.98em;
	color: #666666;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	}
img {
	width: 100%;
	
    border-radius: 8px 8px 0px 0px;
   }
@media screen and (max-width: 1200px){

header{height: 78px;
}}
.logo{width: 110px;height: 32px}
.introduction{font-size: 1em}
}
@media screen and (max-width: 641px) {
figcaption{line-height: 25px; }
.introduction{font-size: 0.9em}
}
@media screen and (max-width: 480px){
figure:nth-child(n) {
	width: 48%;
	margin-top: 2%;
	margin-left: 4%;
	margin-right: 0;
}
figure:nth-child(2n+1) {
	width: 48%;
	margin-top: 2%;
	margin-left: 2%;
	margin-right: 0;
}
span img{
	margin: 0 6px;}
}
figure:hover {   
	box-shadow: inset 0 -3px 0 #cc3232;
}
   .block{height:130px;
          width:100%}
   .message {
    background: rgb(0,0,0);
    position: absolute;
	bottom: 0;
    z-index: 22;
    bottom: 0;
    height: 35px;
    width: 100%;
    overflow: hidden;
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.message p {
    width: 100%;
    text-align: center;
    color: #f2f2f2;}
.device {
  width: 100%;
  position: relative;
  height: 500px;
}
.picuture{
	padding:0px 0px ;
	position:relative;
}

footer {
	width:100%;
	background-color: #E0E0E0;
text-align: center;
}
.footerup{
 margin:0px; 
 padding-bottom: 10px;
 padding-top: 10px;
}
.footerdown{
 margin:0px;
 border-left: 30px solid #E0E0E0;

 }
.footerlogo{
 margin-left: 5px;
width:30px;
 height:25px;
}
footer p{color: #666666;
font-family: "å¾®è½¯é›…é»‘";
    text-shadow: 1px 1px 1px white;}
 .footerlogo2{
  text-align: center;
  width: 120px;}

</style>
	</head>
	<body>
			
	<header>
	    <div class="one">
		<div class="top">
			<img src="../img/表头.png"  alt class="logo">
			<div class="bar">
				<nav>
					<a href="/css/INFINI _ 映纷创意_files/1.jpg" class="active firstNav">天气预报</a>
					<a href="/img/INFINI _ 映纷创意_files/12.jpg">在线试题</a>
					<a href="/css/INFINI _ 映纷创意_files/13.jpg">手机查询</a>
					<a href="/css/INFINI _ 映纷创意_files/13.jpg">网上挂号</a>
				</nav>
               </div>
             </div>
	        </div>
    </header>    
    <main>
	   <div class="block"></div>	
	   <div class="center" style="width: 800px;">
			<div class="swiper">
			<div class="device" style="height: 700px;">
	   <div class="picuture">
	    <img src="../css/INFINI _ 映纷创意_files/58bd39995fb18.jpg">
		<div class="message">
	    <p>清新绿实验室大揭秘</p>			
		</div>
     </div>	
	<div class="introduction">
	  INFINI （映纷创意）是一家独立创新营销公司，致力于创造会流动的美好创意。
	</div>
	</main>	
	
   <hr color="blue">
		<p class="text" align="center">INFINI</p>
		<p align="center">映纷创意</p>
		<hr color="blue">
				
    <aside>
			<span>
				<img src="../img/INFINI _ 映纷创意_files/1.jpg" />
			</span>
			<span>
				<img src="../img/INFINI _ 映纷创意_files/10.jpg">
			</span>
			<span>
				<img src="../img/INFINI _ 映纷创意_files/11.jpg">
			</span>
			<span>
				<img src="../img/INFINI _ 映纷创意_files/12.jpg">
			</span>
			<span>
				<img src="../img/INFINI _ 映纷创意_files/14.jpg">
			</span>
			<span>
				<img src="../img/INFINI _ 映纷创意_files/3.jpg">
			</span>
			<span>
				<img src="../img/INFINI _ 映纷创意_files/5.jpg">
			</span>
			
		</aside>	
		
		
	<section>	
	    <a href="img/INFINI _ 映纷创意_files/5c3ed5adc5c1c.jpg">
	     <div class="polaroid">
	     	<div class="con"></div>
        <img src="../img/INFINI _ 映纷创意_files/5c3ed5adc5c1c.jpg" alt="1" style="width:100%">
       <div class="container">
     
  
  
</svg>
      <p>Tike Tok音乐</p>
     </div>
      </div>
	  </a>
	
	<a href="img/INFINI _ 映纷创意_files/5c3ec9c702adb.jpg">
	 <div class="polaroid">
  <img src="../img/INFINI _ 映纷创意_files/5c3ec9c702adb.jpg" alt="2" style="width:100%">
  <div class="container">
    <p>今日头条年度盛典</p>
  </div>
</div>
	</a>
	
	<a href="img/INFINI _ 映纷创意_files/5c3ec88634813.jpg">
	 <div class="polaroid">
  <img src="../img/INFINI _ 映纷创意_files/5c3ec88634813.jpg" alt="3" style="width:100%">
  <div class="container">
    <p>oppo</p>
  </div>
</div>
	</a>
	
	<a href="img/INFINI _ 映纷创意_files/5c208811a153c.jpg">
	 <div class="polaroid">
  <img src="../img/INFINI _ 映纷创意_files/5c208811a153c.jpg" alt="4" style="width:100%">
  <div class="container">
    <p>中国抖有料</p>
  </div>
</div>
	</a>
	

	
	
</section>	
		
	</body>		
	        <footer>
				<div class="footer-up">
			
					<a href="https://www.baidu.com">
					<img src="../img/表头.png" width="15%">
					</a>
					</div>
					<div class="footer-down">
						
					<address>
					<p>INFINI | 映纷创意</p>
					<p>北京市朝阳区常营</p>
					<p>TEL : 010-85394331</p>
					<p>QQ : 7585917</p>
					<p>Email : infinistudio@foxmail.com</p>
					<p>weibo : @InfiniStudio</p>
					</address>
				</div>
			</footer>	
	
</html>
